<template>
  <n-checkbox
    v-model:checked="localChecked"
    :indeterminate="indeterminate"
    :disabled="disabled || loading"
    :loading="loading"
    :true-value="trueValue"
    :false-value="falseValue"
    v-bind="$attrs"
    @update:checked="handleUpdate"
  >
    <slot />
  </n-checkbox>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  indeterminate: Boolean,
  disabled: Boolean,
  loading: Boolean,
  trueValue: {
    default: true
  },
  falseValue: {
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

const localChecked = ref(props.modelValue)

watch(() => props.modelValue, (newValue) => {
  localChecked.value = newValue
})

const handleUpdate = (checked) => {
  localChecked.value = checked
  emit('update:modelValue', checked)
}
</script>